<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房间管理</el-breadcrumb-item>
      <el-breadcrumb-item>房间列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="35">
          <el-col :span="7">
            <el-input placeholder="请输入酒店id" v-model="queryInfo.query" clearable @clear="getRoomList()">
              <el-button slot="append" icon="el-icon-search" @click="getRoom"></el-button>
            </el-input>
        </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible=true">添加房间</el-button>
          </el-col>
        </el-row>
         <el-table
            :data="roomList"
            style="width: 100%"
            border
            stripe>
            <el-table-column
              prop="id"
              label="房间id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="roomcode"
              label="房间号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="roomdec"
              label="房间描述"
              width="180">
            </el-table-column>
            <el-table-column
              prop="roomtype"
              label="房间类型">
            </el-table-column>
            <el-table-column
              prop="roomstate"
              label="房间状态">
              <template slot-scope="scope">
               <el-tag type="warning" v-if="scope.row.roomstate=== 2">未入住</el-tag>
               <el-tag type="success" v-else-if="scope.row.roomstate=== 0">已打扫</el-tag>
               <el-tag type="success" v-else-if="scope.row.roomstate=== 4">已打扫</el-tag>
               <el-tag type="success" v-else-if="scope.row.roomstate=== 5">已打扫</el-tag>
               <el-tag type="info" v-else-if="scope.row.roomstate=== 1">已退房</el-tag>
               <el-tag type="primary" v-else-if="scope.row.roomstate=== 3">正在住</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="hotelid"
              label="所属酒店">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="mini" @click="updateRooms(scope.row.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRoom(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.queryInfo.pagenum"
                :page-sizes="[1, 2, 3, 5, 10]"
                :page-size="this.queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
              <!-- 添加房间 -->
              <el-dialog
                title="添加房间"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClose">
                <el-form :model="addFrom" :rules="addFormRules" ref="addFormRef" label-width="100px">
                  <el-form-item label="房间号" prop="roomcode">
                    <el-input v-model="addFrom.roomcode"></el-input>
                  </el-form-item>
                  <el-form-item label="房间描述" prop="roomdec">
                    <el-input v-model="addFrom.roomdec"></el-input>
                  </el-form-item>
                  <el-form-item label="房间类型" prop="roomtype">
                    <el-input v-model="addFrom.roomtype"></el-input>
                  </el-form-item>
                  <el-form-item label="房间状态" prop="roomstate">
                    <el-input v-model="addFrom.roomstate"></el-input>
                  </el-form-item>
                  <el-form-item label="所属酒店" prop="hotelid">
                    <el-input v-model="addFrom.hotelid"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addRooms">确 定</el-button>
                </span>
              </el-dialog>

              <!-- 修改房间的对话框 -->
              <el-dialog
                title="修改酒店"
                :visible.sync="updateDialogVisible"
                width="50%"
                @close="updateDialogClose">
                <el-form :model="updateFrom" :rules="updateFormRules" ref="updateFormRef" label-width="100px">
                  <el-form-item label="房间号" prop="roomcode">
                    <el-input v-model="updateFrom.roomcode"></el-input>
                  </el-form-item>
                  <el-form-item label="房间描述" prop="roomdec">
                    <el-input v-model="updateFrom.roomdec"></el-input>
                  </el-form-item>
                  <el-form-item label="房间类型" prop="roomtype">
                    <el-input v-model.number="updateFrom.roomtype"></el-input>
                  </el-form-item>
                  <el-form-item label="房间状态" prop="roomstate">
                    <el-input v-model.number="updateFrom.roomstate"></el-input>
                  </el-form-item>
                  <el-form-item label="所属酒店" prop="hotelid">
                    <el-input v-model="updateFrom.hotelid" disabled></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="updateDialogClose">取 消</el-button>
                  <el-button type="primary" @click="updateRoomInfo">确 定</el-button>
                </span>
              </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default{
    name:'Room',
    data(){
      return{
        queryInfo : {
          query:'',
          pagenum:1,
          pagesize:2
        },
        addFrom:{
          id:'',
          roomcode:'',
          roomdec:'',
          roomtype:'',
          roomstate:'',
          hotelid:''
        },
        updateFrom:{
          id:'',
          roomcode:'',
          roomdec:'',
          roomtype:'',
          roomstate:'',
          hotelid:''
        },
        updateFormRules:{
          roomcode:[
            {required:true, message:'请输入房间号', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          roomdec:[
            {required:true, message:'请输入房间描述',trigger:'blur'},
            {min:0,max:50,message:'长度在0到50个字符',trigger:'blur'}
          ],
          roomtype:[
            {required:true, message:'请输入房间类型id', trigger:'blur'},
            {type: 'number',min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          roomstate:[
            {required:true, message:'请输入房间状态id', trigger:'blur'},
            {type: 'number',min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          hotelid:[
            {required:true, message:'请输入所属酒店id', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ]
        },
        addFormRules:{
          roomcode:[
            {required:true, message:'请输入房间号', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          roomdec:[
            {required:true, message:'请输入房间描述',trigger:'blur'},
            {min:0,max:50,message:'长度在0到50个字符',trigger:'blur'}
          ],
          roomtype:[
            {required:true, message:'请输入房间类型id', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          roomstate:[
            {required:true, message:'请输入房间状态id', trigger:'blur'},
            {min:1, max:3,message:'长度在1到10个字符',trigger:'blur'}
          ],
          hotelid:[
            {required:true, message:'请输入所属酒店id', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ]
        },
        roomList:[],
        total: null,
        addDialogVisible:false,
        updateDialogVisible:false
      }
    },
    created(){
      this.getRoomList()
    },
    methods:{
      addDialogClose(){
        this.$refs.addFormRef.resetFields()
      },
      getRoomList() {
        const that = this
        this.axios.get('http://localhost:8090/room/findAll/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          that.roomList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },
      handleSizeChange(newSize){
        const that = this
        // console.log(newSize)
        that.queryInfo.pagesize = newSize
        that.getRoomList()
      },
      handleCurrentChange(newPage){
        const that = this
        // console.log(that.queryInfo.pagenum)
        that.queryInfo.pagenum = newPage
        that.getRoomList()
      },
      getRoom(){
        const that = this
        // console.log(that.queryInfo.query)
        this.axios.get('http://localhost:8090/room/findRoom/'+that.queryInfo.query+'/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          // console.log(res)
          that.roomList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },

      addRooms(){
        const that = this
        console.log(this.addFrom)
        this.axios.post('http://localhost:8090/room/addRoom',this.addFrom).then(res=>{
          console.log(res.data)
          if(res.data){
            that.addDialogVisible = false
            that.getRoomList()
            this.$message.success('添加成功!')
          }
        })
      },
      updateRooms(id){
        const that = this
        console.log(id)
        this.updateDialogVisible=true
        this.axios.get('http://localhost:8090/room/getRoom/'+id).then(res=>{
          that.updateFrom = res.data
          console.log(that.updateFrom)
          console.log(res.data)
        })
      },
      updateRoomInfo(){
        this.axios.put('http://localhost:8090/room/updateRoom/'+this.updateFrom.id,this.updateFrom).then(res=>{
            if(res.data) {
              this.updateDialogVisible=false
              this.getRoomList()
              this.$message.success('修改成功!')
            }
          })
      },
      updateDialogClose(){
        this.$refs.updateFormRef.resetFields()
      },
    async deleteRoom(id){
              const confirmsg = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).catch(err => {
                return err
              })
              // console.log(confirmsg)
              if(confirmsg != 'confirm'){
                return this.$message.info('取消删除!')
              }
              else{
                this.axios.get('http://localhost:8090/room/deleteRoom/'+id).then(res=>{
                  // console.log(res.data)
                  if(res.data) {
                    this.getRoomList()
                    this.$message.success('删除成功!')
                  }
                })
              }
    }
    }
  }
</script>

<style>
</style>
